<template>
  <div class="box" v-if="postDetails">
    <el-row type="flex" justify="space-between" :span="16">
      <el-col class="content">
        <!-- 面包屑 -->
        <el-row>
          <span class="crumbs" @click="$router.push('/post')">旅游攻略</span>
          <span class="crumbsto">/ 攻略详情</span>
        </el-row>
        <!-- 标题 -->
        <el-row class="title">
          <h1>{{ postDetails.data[0].title }}</h1>
        </el-row>
        <el-row class="contentBox">
          <span class="time">攻略：{{ postTime }} 阅读：14607</span>
          <div v-html="postDetails.data[0].content"></div>
        </el-row>
        <!-- 评论分享 -->
        <el-row class="comments">
          <el-col class="comment">
            <span class="iconfont iconpinglun"></span>
            <span class="share">评论(1)</span>
          </el-col>
          <el-col class="comment">
            <span class="iconfont iconfenxiang"></span>
            <span class="share">分享</span>
          </el-col>
        </el-row>
        <!-- 评论输入组件 -->
        <comment
          @newComment="getComment"
          :commentId="commentId"
          :nickname="nickname"
          ref="callReply"
        ></comment>
        <!-- 评论组件 -->
        <div v-if="comment">
          <postComment :comment="comment" @parentCallReply="parentCallReply"></postComment>
        </div>

        <!-- 分页器 -->
        <el-row type="flex" justify="center" v-if="comment">
          <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="comment.total"
            ></el-pagination>
          </div>
        </el-row>
      </el-col>
      <!-- 侧边栏 -->
      <el-col :span="8" type="flex">
        <div class="sidebar" v-if="RelatedStrategy">
          <postRom :recommendlist="RelatedStrategy.data"></postRom>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import comment from "../../components/post/comment";
import postComment from "../../components/post//postComment";
import postRom from "@/components/post/postRom.vue";
export default {
  components: {
    comment,
    postComment,
    postRom
  },
  data() {
    return {
      //   图片
      dialogImageUrl: "",
      dialogVisible: false,

      postDetails: "", //文章数据
      postTime: "", //拼接时间
      comment: "", //评论数据

      pageSize: 5, //每页条数
      currentPage: 0, //当前页

      commentId: "", //评论id
      nickname: "", //评论名称

      RelatedStrategy: "" //相关攻略
    };
  },
  mounted() {
    this.getPost();
    this.getComment();
    this.getRelatedStrategy();
  },

  methods: {
    getRelatedStrategy() {
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log(res.data);
        this.RelatedStrategy = res.data;
      });
    },

    //评论组件传值
    parentCallReply(commentId, nickname) {
      this.commentId = commentId;
      this.nickname = nickname;
      // this.$nextTick(() => {
      //   this.$refs.callReply.focus();
      // });
    },
    //获取文章
    getPost() {
      this.$axios({
        url: "/posts",
        params: {
          id: this.$route.query.id
        }
      }).then(res => {
        console.log(res.data);
        this.postDetails = res.data;
        // 拼接时间
        let r1 = this.postDetails.data[0].city.created_at.split(":");
        const r2 = r1[0] + ":" + r1[1];
        this.postTime = r2;
      });
    },
    //获取评论
    getComment() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _limit: this.pageSize,
          _start: this.currentPage
        }
      }).then(res => {
        console.log(res.data);
        this.comment = res.data;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleSizeChange(val) {
      console.log("每页", val);
      this.currentPage = val;
      this.getComment();
    },
    handleCurrentChange(val) {
      // 当前页
      console.log("当前页", val);

      this.currentPage = val;
      this.getComment();
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 1000px;
  margin: 0px auto;
  //内容
  .content {
    width: 700px;
    margin-right: 40px;
    .crumbs {
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .crumbsto {
      font-size: 14px;
      color: #aaa;
      cursor: pointer;
    }
    .title {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
    }

    .contentBox {
      .time {
        display: block;
        text-align: right;
        font-size: 14px;
        color: #999999;
        margin: 10px;
      }
      /deep/ img {
        max-width: 100%;
      }
    }
    .comments {
      display: flex;
      font-size: 20px;
      justify-content: center;
      text-align: center;
      margin: 50px 0;
      .comment {
        display: flex;
        flex-direction: column;
      }
      .iconfont {
        font-size: 40px;
        color: #0a0;
        margin: 4px;
      }
      .share {
        font-size: 16px;
        color: #999999;
      }
    }
  }
  .aside {
    border: 1px solid #ccc;
    // height: 700px; //这里是做一个演示，后面如果要开发的话换成高度适应内容  height:fit-content;
  }
  //按钮
  .uploadpPictures {
    margin: 10px 0;
  }
  //侧边栏
  .sidebar {
    .sidebartitle {
      font-size: 20px;
      border-bottom: 1px solid #999;
      padding-bottom: 10px;
    }
    .sidebarcontent {
      font-style: 16px;
      padding: 20px 0;
      border-bottom: 1px solid #999;
    }
    .sidebardate {
      font-size: 14px;
      padding: 30px 0 0;
    }
  }
}
</style>
